<template>
	<up-popup :show="show" :round="10" mode="bottom" @close="handleClose" :safeAreaInsetTop="true"
		closeable>
		<view style="padding: 20rpx;">
			<view style="font-weight: bold;font-size: 34rpx;">
				{{ productData?.pname || '' }}
			</view>

			
			<view style="margin-top: 20rpx;">
				<view style="color:#9c9aa5">单位</view>
				<view style="display: flex;margin-top: 20rpx;">
					<view style="display: flex;margin-top: 20rpx;">
						<view v-for="(item,index) in productData.unitlist" style="min-width: 140rpx;"
							:style="{'margin-left':index===0?'0prx':'10rpx'}">
							<up-button :text="item.unitname" @click="selectedUnit=item"
								:type="selectedUnit.unitname==item.unitname?'primary':'info'" />
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;">
				<view style="color:#9c9aa5">数量</view>
				<view style="display: flex;margin-top: 20rpx;">
					<!-- <up-input v-model="quantity" placeholder="" border="surround" type="number">
						<template #suffix>
							<up-text :text="selectedUnit.label" margin="0 3px 0 0"
								type="tips"></up-text>
						</template>
					</up-input> -->
					<up-number-box v-model="quantity" min="1" integer></up-number-box>
					<text
						style="align-self: center;margin-left: 20rpx;">{{selectedUnit.label}}</text>
						<text style="align-self: center;margin-left: 20rpx;color:red">库存
							{{formartKCComputed()}}</text>
				</view>
			</view>
			
			<view style="height: 100rpx;"></view>

			<!-- 确定按钮 -->
			<view style="margin-top: 20rpx;">
				<up-button type="primary" @click="handleConfirm">确定</up-button>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, watch } from 'vue'
	const app = getApp()

	// Props
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		productData: {
			type: Object,
			default: () => ({})
		}
	})
	// Emits
	const emit = defineEmits(['close', 'confirm'])

	// data
	const businessTypeOptions = [ // 业务属性选项
		{ label: '常规销售', value: '常规销售' },
		{ label: '0元购', value: '0元购' },
		{ label: '兑奖', value: '兑奖' },
		{ label: '销售换货', value: '销售换货' }
	]
	const selectedBusinessType = ref({ label: '常规销售', value: '常规销售' }) // 当前选中的业务属性
	const unitOptions = [ // 单位选项
		{ label: '箱', value: '箱' },
		{ label: '瓶', value: '瓶' } 
	]
	const selectedUnit = ref({ label: '箱', value: '箱' }) // 当前选中的单位
	const quantity = ref(1) // 数量
	const unitPrice = ref(null) // 单价
	
	const formartKCComputed = () => {
		if (props.productData.bigunit) {
			return `${props.productData.bigunitnum}${props.productData.bigunit}${props.productData.smallunitnum}${props.productData.smallunit}`
		} else {
			return `${props.productData.smallunitnum}${props.productData.smallunit}`
		}
	}
	

	// 关闭弹窗
	const handleClose = () => {
		emit('close')
	}

	// 确认提交表单
	const handleConfirm = () => {
		
		let num = quantity.value
		console.log(selectedUnit.value.unitname,props.productData.bigunit)
		if (selectedUnit.value.unitname == props.productData.bigunit) {
			num = quantity.value * props.productData.formulanum
		}
		console.log(num,props.productData.availablenum)
		if (num > props.productData.availablenum) {
			app.globalData.modal.msgError("库存不足")
			return
		}
		const configData = {
			selectedBusinessType: selectedBusinessType.value.value,
			selectedUnit: selectedUnit.value.unitname,
			quantity: quantity.value,
			unitPrice: unitPrice.value ? unitPrice.value : 0
		}

		emit('confirm', configData)
		handleClose()
	}
</script>

<style lang="scss" scoped>
	// 如果需要额外样式可以在这里添加
</style>